<template>
  <div v-loading="isloading" class="change_super">
    <el-form ref="setAction" class="gl_form_mini" label-width="120px" :model="UpdateBusinessesInput" :rules="UpdateBusinessesInput_Rules">
      <div class="form_box">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="商家名称" prop="name">
              <el-input v-model="UpdateBusinessesInput.name" type="text" size="mini" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="当前状态" prop="isOpenOnlinePay">
              <el-select v-model="UpdateBusinessesInput.isOpenOnlinePay" placeholder="请选择" size="mini" style="width:100%">
                <el-option v-for="(item, index) in isOpenPay" :key="index" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="agency_fund">
              <el-form-item label="联合运营" prop="isAgencyFund">
                <el-select v-model="UpdateBusinessesInput.isAgencyFund" placeholder="请选择" size="mini" style="width:100%">
                  <el-option v-for="(item, index) in isAgency" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <span v-show="UpdateBusinessesInput.isAgencyFund" class="agency_fund_txt" title="仅限联合运营用户选择，详情咨询武经理，电话号码：15606190026。">仅限联合运营用户选择，详情咨询武经理，电话号码：15606190026。</span>
            </div>
          </el-col>
        </el-row>
        <!-- 判断代收款的状态决定下面的展示隐藏，初始如果全部是空也是展示的 -->
        <div v-if="!UpdateBusinessesInput.isAgencyFund || UpdateBusinessesInput.isAgencyFund === ''">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="微信应用ID" prop="wxAppId">
                <el-input v-model="UpdateBusinessesInput.wxAppId" type="text" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="微信的商户ID" prop="wxMchId">
                <el-input v-model="UpdateBusinessesInput.wxMchId" type="text" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="微信开发者私钥" prop="wxKey">
                <el-input v-model="UpdateBusinessesInput.wxKey" type="text" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="微信应用密钥" prop="wxSecret">
                <el-input v-model="UpdateBusinessesInput.wxSecret" type="text" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="UpdateBusinessesInput.remark" type="textarea" size="mini" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="gl_mt_30">
          <el-col :span="8" class="gl_mt_30" :offset="8">
            <el-button :loading="loading" type="primary" class="new_super_submit" size="mini" @click="submitData()">保 存</el-button>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import {
  api_POST_TradeBusinessesOnline, // 创建线上商家收款信息
  api_PUT_TradeBusinessesOnline, // 修改
  api_GET_TradeBusinessesOnline // 查询
} from '@/extend/api/swaggerApi/app.js';
import validator from '@/lib/validate/index.js';
import {
  UpdateBusinessesInput,
  BusinessesInput,
  Api_GET_TradeBusinessesOnlineQO
} from '@/lib/form/swaggerForm.js';
export default {
  name: 'OnlineCollection',
  props: {
    isShow: {
      type: Boolean
    }
  },
  data() {
    return {
      UpdateBusinessesInput: new UpdateBusinessesInput(),
      BusinessesInput: new BusinessesInput(),
      Api_GET_TradeBusinessesOnlineQO: new Api_GET_TradeBusinessesOnlineQO(),
      loading: false,
      isloading: false,
      isAgency: [ // 设置代收款
        {
          label: '是',
          value: true
        },
        {
          label: '否',
          value: false
        }
      ],
      isOpenPay: [
        {
          label: '启用',
          value: true
        },
        {
          label: '停用',
          value: false
        }
      ],
      UpdateBusinessesInput_Rules: { // 字段规则
        name: [
          validator.required('商家名称不能为空')
        ],
        isOpenOnlinePay: [
          { required: true, message: '请设置当前状态', trigger: 'change' }
        ],
        wxAppId: [
          validator.required('微信应用ID不能为空')
        ],
        wxMchId: [
          validator.required('微信的商户ID不能为空')
        ],
        wxKey: [
          validator.required('微信开发者私钥不能为空')
        ],
        wxSecret: [
          validator.required('微信应用密钥不能为空')
        ],
        isAgencyFund: [
          { required: true, message: '请选择是否代收款', trigger: 'change' }
        ]
      }
    };
  },
  computed: {
    ...mapState({
      DelegationId: state => state.user.rootDelegationId
    })
  },
  watch: {
    isShow: {
      handler: function(val) {
        if (val) {
          this.isloading = true;
          if (this.UpdateBusinessesInput) {
            this.UpdateBusinessesInput.isOpenOnlinePay = true;
          }
          this.findBusiness();
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
  },
  methods: {
    // 查询商家信息
    findBusiness() {
      var that = this;
      that.isloading = true;
      that.Api_GET_TradeBusinessesOnlineQO.BusinessesId = this.DelegationId || '';
      api_GET_TradeBusinessesOnline(that.Api_GET_TradeBusinessesOnlineQO).then(res => {
        that.isloading = false;
        if (res) {
          that.UpdateBusinessesInput = res;
          that.BusinessesInput = JSON.parse(JSON.stringify(that.UpdateBusinessesInput));
        }
      }).catch(res => {
        that.isloading = false;
        that.$message({
          message: '查询商家信息失败 ' + res.error.message,
          type: 'error'
        });
      });
    },
    // 修改商家信息
    modifyBusiness() {
      var that = this;
      that.loading = true;
      that.UpdateBusinessesInput.businessesId = that.DelegationId || '';
      api_PUT_TradeBusinessesOnline(that.UpdateBusinessesInput).then(res => {
        that.loading = false;
        that.$message({
          message: '收款账号修改成功',
          type: 'success'
        });
        that.findBusiness();
      }).catch(res => {
        that.loading = false;
        var message = res.error.message.split('msg=')[1] ? '：' + res.error.message.split('msg=')[1] : '：' + (res.error.message || '');
        that.$message({
          message: `收款账号修改失败${message}`,
          type: 'error'
        });
      });
    },
    // 创建商家
    creatBuss() {
      var that = this;
      that.loading = true;
      that.UpdateBusinessesInput.businessesId = that.DelegationId || '';
      api_POST_TradeBusinessesOnline(that.UpdateBusinessesInput).then(res => {
        that.loading = false;
        that.findBusiness();
        that.$message({
          message: '创建商家成功',
          type: 'success'
        });
      }).catch(res => {
        that.loading = false;
        var message = res.error.message.split('msg=')[1] ? '：' + res.error.message.split('msg=')[1] : '：' + (res.error.message || '');
        that.$message({
          message: `创建商家失败${message}`,
          type: 'error'
        });
      });
    },
    // 修改账户
    submitData() {
      var that = this;
      that.$refs.setAction.validate((valid) => {
        if (valid) {
          that.loading = true;
          if (!that.BusinessesInput.name) {
            that.creatBuss();
          } else {
            that.modifyBusiness();
          }
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.change_super{
  width: 940px;
  margin: 15px;
}
.form_box {
  width: 470px;
  display: inline-block;
}
.new_super_submit{
  width:100%;
}
.set_num{
  text-align: center;
}

.agency_fund {
  position: relative;
}
.agency_fund_txt {
  position: absolute;
  left: 105%;
  top: 10px;
  font-size: 13px;
  color: #ff0000;
  width: 800px;
}
</style>
